<template>
  <div>
    <el-dialog
      title="添加选择题"
      :visible.sync="addVisible"
      width="45%"
      :show-close="false"
      :close-on-click-modal="false">

      <el-form :model="dataForm" :rules="dataForm_rules" ref="dataForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属科目：" prop="f_sb_id">
          <div class="block">
            <el-cascader
              placeholder="请选择"
              :options="options"
              filterable
              v-model="dataForm.f_sb_id"
            ></el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="题目内容：" prop="ch_title">
          <el-input type="textarea" v-model="dataForm.ch_title"></el-input>
        </el-form-item>

        <el-form-item label="选项A：" prop="ch_choose_A">
          <el-input type="textarea" v-model="dataForm.ch_choose_A"></el-input>
        </el-form-item>

        <el-form-item label="选项B：" prop="ch_choose_B">
          <el-input type="textarea" v-model="dataForm.ch_choose_B"></el-input>
        </el-form-item>

        <el-form-item label="选项C：" prop="ch_choose_C">
          <el-input type="textarea" v-model="dataForm.ch_choose_C"></el-input>
        </el-form-item>

        <el-form-item label="选项D：" prop="ch_choose_D">
          <el-input type="textarea" v-model="dataForm.ch_choose_D"></el-input>
        </el-form-item>

        <el-form-item label="类型：" prop="f_ch_type">
          <el-select v-model="dataForm.f_ch_type" placeholder="类型">
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
          </el-select>
        </el-form-item>

        <!--单选题答案选项-->
        <el-form-item label="选项：" prop="radioAnswer" v-if="dataForm.f_ch_type == '1'">
          <el-radio-group v-model="dataForm.radioAnswer">
            <el-radio label="A" value="A"></el-radio>
            <el-radio label="B" value="B"></el-radio>
            <el-radio label="C" value="C"></el-radio>
            <el-radio label="D" value="D"></el-radio>
          </el-radio-group>
        </el-form-item>


        <!--多选题答案-->
        <el-form-item label="选项：" prop="checkBoxAnswer" v-if="dataForm.f_ch_type == '2'">
          <el-checkbox-group v-model="dataForm.checkBoxAnswer">
            <el-checkbox label="A" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="B" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="C" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="D" name="checkBoxAnswer"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeAdd">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateInfo">确 定</el-button>
     </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getAllSubject,addChoose,deleteChoose,updateChoose,findChoose} from '@/api/questions'
  export default{
    props:["addShow"],
    data(){
      return {
        addVisible:this.addShow,
        dataForm:{
          sb_id:0,
          ch_title:"",
          ch_choose_A:"",
          ch_choose_B:"",
          ch_choose_C:"",
          ch_choose_D:"",
          ch_type:"",
          chooseAnswerList:[],

          radioAnswer:"", //单选题答案
          checkBoxAnswer:[], //多选题答案
          f_sb_id:0,
          f_ch_type:"1"
        },

        options:[], //选择所属科目
        dataForm_rules:{
          f_sb_id:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_title:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_A:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_B:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_C:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_D:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          f_ch_type:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          radioAnswer:[
              { required: true, message: '不能为空', trigger: 'change' }
          ],
          checkBoxAnswer:[
              { required: true, message: '不能为空', trigger: 'change' }
          ]
        }
      }
    },
    mounted(){
        this.c_getAllSubject();
    },
    methods:{

      //获取所有级联选项
      c_getAllSubject(){
        getAllSubject().then(res=>{
           if(res.code == 200){
              for(let i = 0;i < res.data.length;i ++){
                  let tLevel = {value:res.data[i].l_id,label:res.data[i].l_name};
                  this.options.push(tLevel);
                  if(res.data[i].list != null && res.data[i].list.length > 0){
                      let gList = res.data[i].list;
                      let children = [];
                      for(let j = 0;j < gList.length;j ++){
                          let gGroup = {value:gList[j].g_id,label:gList[j].g_name};
                          children.push(gGroup);

                          if(gList[j].list != null && gList[j].list.length > 0){
                              let sList = gList[j].list;
                              let children1 = [];

                              for(let n = 0;n < sList.length;n ++){
                                  let subject = {value:sList[n].sb_id,label:sList[n].sb_name};
                                  children1.push(subject);
                              }
                              gGroup.children = children1;
                          }
                      }
                      tLevel.children = children;
                  }
              }
           }
        });
      },

      //关闭弹出框
      updateInfo(){
        //进行数据校验
        this.$refs["dataForm"].validate((valid) => {
            if(valid){
                //对一些特殊数据进行重新封装
               this.dataForm.sb_id = parseInt(this.dataForm.f_sb_id[2]); //所属科目
               this.dataForm.ch_type = parseInt(this.dataForm.f_ch_type);
              this.dataForm.chooseAnswerList = [];
                if( this.dataForm.ch_type == 1){ //单选
                   this.dataForm.chooseAnswerList.push({ca_answer:this.dataForm.radioAnswer})
                }else{ //多选
                   for(let i = 0;i < this.dataForm.checkBoxAnswer.length;i ++){
                     this.dataForm.chooseAnswerList.push({ca_answer:this.dataForm.checkBoxAnswer[i]});
                   }
                }
              addChoose(this.dataForm).then(res=>{
                  if(res.code == 200){
                    this.$message({
                      type: 'success',
                      message: '添加成功'
                    });
                    this.closeAdd();
                  }
              });
            }

        });

      },

      //添加信息
      closeAdd(){
        this.addVisible = false;
        this.$emit("closeDialog",1);
      }
    }
  }
</script>
